<template>
  <div class="footprint">
    <div class="header">
        <div class="img" @click="$router.go(-1)">
            <img src="../assets/img/fanhui.png" alt="">
        </div>
      <h1>足迹</h1>
    </div>
    
    <router-link tag="div" :to="'/page?id='+item.id" class="items" v-for="item in footprint" :key="item.id">
                <div class="img">
                    <img :src="item.imgs" alt="">
                    <span>跟团游|广州出发</span>
                </div>
                <div class="word">
                    <div class="top">
                        {{item.title}}
                    </div>
                    <div class="mid">
                        <span v-show="item.name">{{item.name}}</span>
                    </div>
                    <div class="bottom">
                        <span ><i>￥</i>{{item.num}}</span>
                    </div>
                </div>
            </router-link>

  </div>
</template>

<script>
export default {
  data() {
    return {
      footprint:[],
    };
  },
  created(){
    this.footprint = JSON.parse(window.localStorage.getItem("footprint"));
  }
};
</script>

<style lang="scss" scoped>
.footprint{
    .header {
        padding: 0 10px;
    height: 44px;
    background: #ffd800;
    display: flex;
    align-items: center;
    .img{
        width: 20px;
        height: 20px;
        img{
            width: 100%;
        }
    }
    h1 {
      text-align: center;
      font-weight: normal;
      font-size: 16px;
      flex: 1;
    }
  }
   .items{
    padding: 4px;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    .img{
        width: 150px;
        height: 100px;
        position: relative;
        img{
            width: 100%;
        }
        span{
            display: block;
            position: absolute;
            top: 2px;
            left: 4px;
            background:rgba(0,0,0,0.4);
            color: #fff;
            border: 1px solid transparent;
            border-radius: 20px;
            font-size: 12px;
            padding: 2px 4px;
        }
    }
    .word{
        margin-left: 10px;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-around;
        .top{
                color: #000;
                font-size: 15px;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                white-space: initial;
                height: 40px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                margin-top: 2px;
        }
        .mid{
            span{
                border: 1px solid #00b9ef;
                color: #00b9ef;
                font-size: 12px;
                transform: scale(0.8);
                border-radius: 20px;
                padding: 3px;
                margin-right: 5px;
            }
        }
        .bottom{
          margin-right: 5px;
            span{
                color: #ff8c00;
                font-size: 20px;
                i{
                    font-style: normal;
                    font-size: 12px;
                    
                }
            }
        }
    }
  }
}
</style>
